<template>
  <div>
    <van-nav-bar title="黑马头条-登录" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="formLogin.mobile"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        required
        :rules="[
          {
            required: true,
            message: '手机号输入错误',
            pattern: /^1[3-9]\d{9}$/,
            trigger: 'onChange',
          },
        ]"
      />
      <van-field
        v-model="formLogin.code"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        required
        :rules="[
          {
            required: true,
            message: '密码填写错误',
            pattern: /^\d{6}$/,
            trigger: 'onChange',
          },
        ]"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :disabled="isLogin"
          :loading="isLogin"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { Notify } from 'vant'

export default {
  name: 'LoGin',
  data () {
    return {
      formLogin: {
        mobile: '13888888888',
        code: '246810' // 默认只能用246810后台规定了
      },
      password: '',
      isLogin: false // 禁用状态
    }
  },
  methods: {
    ...mapActions(['asyncLoginAction']), // 调用的actions 里的方法，是一个数组
    async onSubmit (value) {
      this.isLogin = true // 提交之后 开启禁用状态，成功或失败 之后 解开禁用
      try {
        // const res = await LoginApi(this.formLogin)
        // const { refresh_token, token } = res.data.data
        // console.log(token, refresh_token)
        await this.asyncLoginAction(this.formLogin)
        Notify({ type: 'success', message: '登录成功' })
        // this.$router.replace('/Layout')
        this.$router.push('/Layout')
        this.isLogin = false
      } catch (err) {
        this.isLogin = false
        Notify({ type: 'warning', message: '手机号或密码错误' })
      }
    }
  }
}
</script>

<style lang="less" scoped>
// .van-nav-bar{
//   background-color:#057cff
// }
// /deep/ .van-nav-bar__title{
//   color:#fff
// }
</style>
